<template>
  <div class="vi-header-content">
    <div class="vi-left">
      <label>{{ title.name }}</label>
      <span v-if="title.unit">（{{ title.unit }}）</span>
    </div>
    <div class="vi-right">
      <el-radio
        size="mini"
        v-for="(item, index) in radioList.list"
        :key="item.label"
        v-model="radioList.radio"
        :label="item.label"
        >{{ item.name }}</el-radio
      >
      <div class="vi-line" v-if="radioList.list.length > 0"></div>
      <img
        class="enlarge"
        @click="$emit('enlarge')"
        src="~@/assets/image/enlarge.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "vi-header",
  props: {
    title: {
      default: {
        name: "",
        unit: ""
      }
    },
    radioList: {
      default: {
        radio: "",
        list: []
      }
    }
  },
  data() {
    return {
      radio: "1"
    };
  },
  watch: {
    radioList: {
      handler(val) {
        this.$emit("changeRadio", val);
      },
      deep: true
    }
  }
};
</script>

<style scoped lang="scss">
@import "../styles/header.scss";
</style>
